<template>
  <van-search v-model="keyword" shape="round" background="#ff5454" placeholder="请输入搜索关键词" @search="search" />
  <van-swipe :autoplay="3000" touchable lazy-render>
    <van-swipe-item v-for="image in images" :key="image">
      <img :src="image" />
    </van-swipe-item>
  </van-swipe>
  <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />

  <van-grid square>
    <van-grid-item v-for="item in hotcategory" :key="item.title" :icon="item.img" :text="item.title" />
  </van-grid>
  <div class="ms">
    <van-row gutter="20">
      <van-col span="8" style="font-weight: 700; padding-left:5px;font-size: 13px;padding-top: 5px;">华杉科技秒杀活动</van-col>
      <van-col span="12">
        <van-icon name="clock-o" style="float: left;margin-top: 7px; margin-right: 8px;" />
        <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" style="color: red; padding-top: 6px;" />
      </van-col>
      <van-col span="4">
        <van-icon name="share-o" style="float: right; margin-right: 5px;margin-top: 7px;" />
      </van-col>
    </van-row>
    <!--图标的样式-->
    <van-grid>
      <van-image v-for="item in mscategory" :key="item.title" width="4rem" height="4rem" fit="contain" :src="item.img">
        {{ item.title }}
      </van-image>
    </van-grid>
  </div>
  <!--热门商品推荐-->
  <van-cell title="热门商品" icon="fire-o" is-link value="更多商品" style="color: rgb(245, 134, 134);" />
  <van-grid :column-num="3" icon-size="110px" gutter="3px">
    <van-grid-item v-for="item in hotProduct" :key="item.title" :icon="item.img" :text="item.title" />
  </van-grid>
  <van-cell title="个人推荐" icon="star-o" is-link value="更多商品" style="color: rgb(245, 134, 134);" />
  <van-grid :column-num="3" icon-size="110px" gutter="3px" class="fontbtm">
      <van-grid-item v-for="item in hotProduct" :key="item.title" :icon="item.img" :text="item.title" />
    </van-grid>


  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="cluster-o" :to="{name:'movecategory'}">分类</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
    <van-tabbar-item icon="setting-o" :to="{name:'home'}">个人中心</van-tabbar-item>
  </van-tabbar>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const active = ref(0)
const keyword = ref()
const time = ref(30 * 60 * 60 * 1000);
const images = [
  'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/241563/12/1515/134109/658e6383F3711c8fd/eb283cf6a1efcaa7.jpg',
  'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/239398/31/4400/80947/65b9c02bFd27d25d9/2e9caf3e9cfddb3e.jpg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
]
const hotcategory = ref([
  { img: "//m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png", title: "华莱超市" },
  { img: "//m15.360buyimg.com/mobilecms/jfs/t1/149144/13/37547/3299/64b11027F86659ec1/fade439ac90544b7.png", title: "华莱电器" },
  { img: "//m15.360buyimg.com/mobilecms/jfs/t1/195186/28/35854/3469/64d4a1e5Fe388886e/3c6f65ecd0aba98b.png", title: "服饰美妆" },
  { img: "https://m15.360buyimg.com/mobilecms/jfs/t1/208529/13/35972/4081/6497ee53F4f8d38d9/c5267cb385f923fe.png", title: "充值中心" },
  { img: "//m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png", title: "plus会员" },
  { img: "//m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png", title: "plus会员" },
  { img: "//m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png", title: "plus会员" },
  { img: "//m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png", title: "plus会员" },
])
const mscategory = ref([
  { img: "//m.360buyimg.com/seckillcms/jfs/t1/245790/2/2612/98592/659cac50F53b2b140/44ea6ddafc1671a6.jpg", title: "￥9.9" },
  { img: "//m.360buyimg.com/seckillcms/jfs/t1/229263/8/4200/112348/655f17d6F77b489c3/3936874afe3e54ba.jpg", title: "￥19.9" },
  { img: "//m.360buyimg.com/seckillcms/jfs/t1/56956/32/21206/179345/62f9ad10E47539bd6/593ce9db5d7f42be.jpg", title: "￥1909.9" },
  { img: "//m.360buyimg.com/seckillcms/jfs/t1/216990/18/37279/192546/65e6c377Fee457eef/af82092089c496a1.jpg", title: "￥109.9" },
  { img: "//m.360buyimg.com/seckillcms/jfs/t1/216990/18/37279/192546/65e6c377Fee457eef/af82092089c496a1.jpg", title: "￥109.9" },
])

const hotProduct = ref([
  { img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/227449/30/8739/98774/657ac425Fae78cfe6/3bbb46bf41f9f138.jpg', title: '电动牙刷' },
  { img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/224516/22/3614/65690/6554763dFe7747281/b6a98f81f15d8e39.jpg', title: '无线蓝牙耳机' },
  { img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/127608/34/36621/37546/64b10008Feb218e10/c26e1485777778fa.jpg', title: '智能水杯' },
  { img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/227449/30/8739/98774/657ac425Fae78cfe6/3bbb46bf41f9f138.jpg', title: '电动牙刷' },
  { img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/224516/22/3614/65690/6554763dFe7747281/b6a98f81f15d8e39.jpg', title: '无线蓝牙耳机' },
  { img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/127608/34/36621/37546/64b10008Feb218e10/c26e1485777778fa.jpg', title: '智能水杯' },


])


const search = () => {
  console.log("触发了搜索。。。");
}




</script>
<style scoped>
img {
  width: 100%;
  height: 220px;
}

.grids {
  background-color: aliceblue;
  border-radius: 5px;
}

.van-image {
  padding: 5px;
  color: red;
}

.fontbtm {
  margin-bottom: 40px;
}
/* .van-grid-item__content .van-grid-item__text{
  font-size: 18px !important
} */
</style>